<!DOCTYPE html>
<html>
      <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <title>导航</title>
            <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
            <script src="https://cdn.staticfile.net/jquery/3.2.1/jquery.min.js"></script>
            <script src="https://cdn.staticfile.net/popper.js/1.15.0/umd/popper.min.js"></script>
            <script src="https://cdn.staticfile.net/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
      </head>
      <body>
            <!-- 简单导航 -->
            <ul class="nav">
                  <li class="nav-item">
                        <a class="nav-link" href="#">导航一</a>
                  </li>
                  <li class="nav-item">
                        <a class="nav-link" href="#">导航二</a>
                  </li>
                  <li class="nav-item">
                        <a class="nav-link" href="#">导航三</a>
                  </li>
                  <li class="nav-item">
                        <a class="nav-link" href="#">导航四</a>
                  </li>
                  <li class="nav-item">
                        <a class="nav-link" href="#">导航五</a>
                  </li>
            </ul>

            <!-- 导航居中对齐 -->
            <ul class="nav justify-content-center">
                  <li class="nav-item">
                        <a class="nav-link" href="#">导航一</a>
                  </li>
                  <li class="nav-item">
                        <a class="nav-link" href="#">导航二</a>
                  </li>
                  <li class="nav-item">
                        <a class="nav-link" href="#">导航三</a>
                  </li>
            </ul>

            <!-- 导航右对齐 -->
            <ul class="nav justify-content-end">
                  <li class="nav-item">
                        <a class="nav-link" href="#">导航一</a>
                  </li>
                  <li class="nav-item">
                        <a class="nav-link" href="#">导航二</a>
                  </li>
                  <li class="nav-item">
                        <a class="nav-link" href="#">导航三</a>
                  </li>
            </ul>

            <!-- 垂直导航 -->
            <ul class="nav flex-column">
                  <li class="nav-item">
                        <a class="nav-link" href="#">导航一</a>
                  </li>
                  <li class="nav-item">
                        <a class="nav-link" href="#">导航二</a>
                  </li>
                  <li class="nav-item">
                        <a class="nav-link" href="#">导航三</a>
                  </li>
            </ul>

            <!-- 选项卡导航 -->
            <ul class="nav nav-tabs">
                  <li class="nav-item">
                        <a class="nav-link" href="#">导航一</a>
                  </li>
                  <li class="nav-item">
                        <a class="nav-link" href="#">导航二</a>
                  </li>
                  <li class="nav-item">
                        <a class="nav-link" href="#">导航三</a>
                  </li>
            </ul>

            <!-- 胶囊导航 nav-justified 等宽显示-->
            <ul class="nav nav-pills nav-justified">
                  <li class="nav-item">
                        <a class="nav-link" href="#">导航一</a>
                  </li>
                  <li class="nav-item">
                        <a class="nav-link" href="#">导航二</a>
                  </li>
                  <li class="nav-item">
                        <a class="nav-link" href="#">导航三</a>
                  </li>
            </ul>

            <!-- 下拉菜单式导航 -->
            <ul class="nav nav-pills">
                  <li class="nav-item">
                        <a class="nav-link" href="#">导航一</a>
                  </li>
                  <li class="nav-item">
                        <a class="nav-link" href="#">导航二</a>
                  </li>
                  <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">导航三</a>
                        <div class="dropdown-menu">
                              <a class="dropdown-item" href="#">下拉菜单1</a>
                              <a class="dropdown-item" href="#">下拉菜单2</a>
                              <a class="dropdown-item" href="#">下拉菜单3</a>
                        </div>
                  </li>
            </ul>

            <!-- 动态导航 -->
            <ul class="nav nav-tabs">
                  <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#home">导航一</a>
                  </li>
                  <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#menu1">导航二</a>
                  </li>
                  <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#menu2">导航三</a>
                  </li>
            </ul>
            <div class="tab-content">
                  <div class="tab-pane container" id="home">
                        <h3>首页</h3>
                        <p>首页一些内容</p>
                  </div>
                  <div class="tab-pane container" id="menu1">
                        <h3>菜单1</h3>
                        <p>菜单1一些内容</p>
                  </div>
                  <div class="tab-pane container" id="menu2">
                        <h3>菜单2</h3>
                        <p>菜单2一些内容</p>
                  </div>
            </div>

      </body>
</html>